<template>
	<div>
		<a-card>
			<a-button type="primary" @click="addBlog">添加帖子</a-button>
			<a-table 
				:columns="columns" 
				:data-source="page.list" 
				rowKey="blogId"
				bordered
				:pagination="false"
				:loading="loading">
				<template slot="num" slot-scope="text, record, index">
					{{(page.currentPage - 1)*page.pageSize+parseInt(index)+1}}
				</template>
				<template slot="isTop" slot-scope="text,record">
					<a-switch 
						:default-checked="text == 0 ? false : true"
						:disabled="disableTop"
						@change="enableTop(record.blogId, text)"/>
				</template>
				<template slot="blogImage" slot-scope="text">
					<a-avatar :size="64" icon="user" :src="text" />
				</template>
				<template slot="operation" slot-scope="text,record">
					<div class="editable-row-operations">
						<a-button type="primary" @click="handleBlogEdit(record.blogId)">
							修改
						</a-button>
						<a-button type="link" @click="handleBlogRead(record.blogId)">
							查看
						</a-button>
					</div>
				</template>
			</a-table>
			<a-pagination 
				v-model="page.currentPage"
				:page-size-options="['5','10','20','50']"
				:total="page.totalCount"
				show-size-changer
				:page-size="page.pageSize"
				@showSizeChange="onSizeChange"
				@change="onPageChange">
				<template slot="buildOptionText" slot-scope="props">
					<span v-if="props.value !== '50'">{{ props.value }}条/页</span>
					<span v-if="props.value === '50'">全部</span>
				</template>
			</a-pagination>
		</a-card>
	</div>
</template>

<script>
	import {blogColumns as columns} from '@/assets/js/tableList/ContentTable.js'
	import {
		getBlogByPage,
		enableBlogTop
	} from '@/api/Content.js'
	export default {
		name: 'BlogList',
		data() {
			return {
				loading: true,
				disableTop: false,
				columns: [],
				page: {
					currentPage: 1, // 当前页
					pageSize: 5, // 每页显示条数
					totalPage: 0, // 总页数
					totalCount: 0, // 总条数
					params: {}, // 查询参数对象
					list: [], // 数据
					sortColumn: '', // 排序列
					sortMethod: 'asc' // 排序方式
				}
			};
		},
		mounted() {
			this.initData()
			this.fetchBlogData()
		},
		methods: {
			// 分页加载博客列表数据
			async fetchBlogData() {
				const {
					data: res
				} = await getBlogByPage(this.page);
				if (res.code !== 20005)
					return this.$message.error('查询出错')
				console.log(res)
				this.page = res.data
				// 消除不必要产生的查询参数
				this.page.index = undefined
				this.loading = false
				this.$message.success(res.msg)
			},
			onPageChange (newPage) {
				this.page.currentPage = newPage
				this.fetchBlogData()
			},
			// 页面变化
			onSizeChange(current, newSize) {
				this.page.pageSize = newSize;
				this.fetchBlogData()
			},
			// 初始化加载列表
			initData() {
				this.columns = columns
			},
			// 开启文章置顶
			async enableTop (id, status) {
				let state = status == 1 ? 0 : 1
				const {data:res} = await enableBlogTop(state, id)
				if (res.code !== 20008)
					return this.$message.error(res.msg)
				this.disableTop = true
				setTimeout(()=>{
					this.disableTop = false
				},1500)
				this.$message.success(res.msg)
			},
			// 添加帖子
			addBlog () {
				this.$router.push('/content/blog/edit')
			},
			// 查看帖子
			handleBlogRead (id) {
				// console.log(id)
				this.$router.push(`/content/blog/detail?blogId=${id}`)
			},
			// 修改帖子
			handleBlogEdit (id) {
				this.$router.push(`/content/blog/edit?blogId=${id}`)
			}
		},
	}
</script>

<style>
</style>
